<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<meta http-equiv="Pragma" content="no-cache" >
<meta http-equiv="Cache-Control" content="no-cache" >
<meta http-equiv="Expires" content="-1" >

<link rel="shortcut icon" href="/icon/info.niwota.frames">
<title>E*Frame</title>

<link rel="stylesheet" href="/assets/style/common.css" type="text/css">

<style type="text/css">
body, html {overflow:hidden; height:100%; margin:0; padding:0;}

#gallery-frame {position:absolute; height:100%; width: 480px; margin-top: 48px; }
#gallery-frame {margin: 8px auto; background: #000; padding:12px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.2); box-shadow: 0 1px 3px rgba(0,0,0,.2);}
.frame-item a:link, .frame-item a:visited, .frame-item a:active, .frame-item a:hover { text-decoration: none; color: #fff;}
.frame-item a:hover {color: #000; background-color: orange;} 
.galleria-thumbnails .galleria-image {height: 72px; width: 72px; margin: 0 1px 0 0;}
#gallery {height: 420px; }

/**/
.pagecontrols {z-index: 1000; position:absolute; margin-top:10px; margin-left:auto;margin-right:auto;}
a.pagecontrol {outline:0; background-color:#2993dd; float:left; height:15px; margin:4px 3px; text-indent:-9999px; width:15px; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px;}
a.pagecontrol:hover, a.pagecontrol.active {background-color:#ff0000; -moz-box-shadow:0 0 7px #1e435d inset; box-shadow:0 0 7px #1e435d inset;}

/**/
.wrapper {margin-top: 32px; margin-bottom: auto; margin-left: 32px; margin-right: 32px; width: 800px; text-align: left; border: none; clear: both; }

.cell {margin: 2px; height: auto; width: auto; float: left; text-align: center; }
.cell img {display: inline; width: 32px; height: 32px; margin: 0px; padding: 0px; border: none;}
.cell:hover {background-color: orange;}

#list {padding: 0; margin: 0; width: auto; clear: both;}
#list li { list-style-type:none; margin: 0 0 10px 0;}
#list a, #list a:visited {display: inline; text-align: left; text-decoration: none; }
#list a:hover {background: orange; color:#fff;} 
</style>

<script type="text/javascript" src="/assets/opt/script/jquery.js"></script>
<script type="text/javascript" src="/assets/script/common.js"></script>
<script type="text/javascript" src="/assets/script/uri-1.0.js"></script>
<script type="text/javascript" src="/assets/script/blacktea-1.0.js"></script>
<script src="/content/info.niwota.frames/assets/opt/galleria/galleria-1.2.2.js"></script>
<script src="/content/info.niwota.frames/assets/opt/galleria/themes/classic/galleria.classic.js"></script>

<script id="peer_tpl" type="text/x-blacktea-template">	
	<a class="cell" href="${fn:appbase}peer=${username}">
		<img src="/assets/opt/tango-icon-theme/22x22/apps/${fn:status}" />
		<div class="caption">${fn:label}</div>
	</a>
</script>
<script type="text/javascript">
function formatPeer(data, app) {
	function baseQueryLink(l) {
		var idx = l.indexOf('?');
		if (idx == -1) {
			return l + '?';
		}
		var len_1 = l.length - 1;
		if (idx < len_1) {
			return l + '&';
		}
		//idx == len_1
		return l;
	}
	function formatLabel(label) {
		var idx = label.indexOf('@');
		return idx == -1 ? label : label.substring(0, idx) + '<br />' + label.substring(idx);
	}
	var fn = { 
		appbase: baseQueryLink(app ? app : '/home/?type=html' ),
		status: function () {
			return this.status > 0 ? 'system-users.png' : 'system-users-off.png';
		},
		label: function () {
			var l = this.name || this.username;
			return formatLabel(l);
		}
	};
	return blacktea('peer_tpl', data.peers, fn, '<br style="clear: both;" />', 7);
}
function listPeer() {
	$('#frame-list').hide();
	$('#peer-list').html(spinner);

	$.get('/home?type=json', function(d) {
		showPeers(d, '/content/info.niwota.frames/');
	});
	return false;
}

function showPeers(d, app) {
	var peerpanel = $('#peer-panel');
	var peerlist = $('#peer-list', peerpanel);
	if (d && d.peers && d.peers.length > 0) { 
		peerpanel.show(); 
		peerlist.html(formatPeer(d, app)); 
	} else { 
		peerpanel.hide(); 
	}
}
</script>

<script type="text/javascript">
// based on http://tutorialzine.com/2010/05/sweet-pages-a-jquery-pagination-solution/
function initPager(d) {
	var total = d.list.length, pages = total/d.pagesize, pagecontrols = $('#pagecontrols').empty();
	for(var i = 0; i < pages; i++) {
		pagecontrols.append('<a href="" class="pagecontrol">'+(i+1)+'</a>');
	}
	var controls = pagecontrols.find('a.pagecontrol');
	controls.click(function (e) {
		var t = $(this);
		t.addClass('active').siblings().removeClass('active');
		d.active = parseInt(t.text());
		showFrame(d);
		e.preventDefault();
	});
	controls.eq(0).addClass('active');
	pagecontrols.css({
		'left':'50%',
		outline:0,
		'margin-left':-pagecontrols.width()/2
	});
}
</script>

<script type="text/javascript">
var jsonp = '/content/info.niwota.frames/jsonp/frame/';
var spinner = '<img src="/assets/image/spin.gif" alt="Please wait" ><span style="color: white; font-size: x-large;">...<blink>.....</blink></span>';

$.ajaxSetup ({  
	cache: false  
}); 

//
var frames = [];
var peer = '';

function loadFrames(p) {
	var g = $('#frame-list');
	g.html(spinner);
	peer = (p ? p : '');
	var url = jsonp + 'listFrames?peer='+ peer;
	$.get(url, function(d) {
	   showFrames(d);
	});
	return false;
}

function showFrames(data) {
	frames = data.frames;
 	var html = '<ul>';
 	var d = data.frames;
	for (var i = 0; i < d.length; i++) {
		var label = d[i].label;
		html +=  '<li><span class="frame-item"><a onclick="return loadFrame('+ i + ');" href="#" >'+label+'</a></span></li>';		
	}
	html += '</ul>';
	
	var g = $('#frame-list');
	g.html(html);
}

function loadFrame(idx) {
	var g = $('#gallery');
	g.html(spinner);
	var label = frames[idx].label;
	var lastModified = frames[idx].lastModified;
	var url = jsonp + 'loadFrame?label='+ encodeURIComponent(label)+'&lastModified='+lastModified+'&peer='+peer;
	$.get(url, function(d) {
		d.active = 1;
		d.pagesize = 6;
		
		initPager(d);
		showFrame(d);
	});
	return false;
}

function showFrame(d) {
	var gdata=galleriaData(d), frame=$('#gallery-frame'), g = $('#gallery');
	frame.css({
		'left':'50%',
		'margin-left':-frame.width()/2
	});
	g.empty();
	g.galleria({
		width: 'auto',
        height: 'auto',
    	data_source: gdata,
		preload: 1,
		queue: false,
		thumbFit: false,
		thumbMargin: 0,
		thumbCrop: true,
		lightbox: true,
		imageCrop: 'height'
	});
}

function galleriaData(d) {
	var label = d.label, data = d.list, r = [];
	var current = d.active, pagesize = d.pagesize;
	var start = (current - 1) * pagesize, end = Math.min(current * pagesize, data.length);
	
	for (var i = 0, len = end - start; i < len; i++) {
		var idx = i + start;
		var q =  'uri='+ encodeURIComponent(data[idx].uri) + '&peer='+ peer + '&label=' + encodeURIComponent(label) + '&hash=' + data[idx].hash + '&data=true';
		r[i] = {};
		r[i].image = '/content/info.niwota.frames/bin/image?size=vignette&' + q;
		r[i].thumb = '/content/info.niwota.frames/bin/image?size=thumbnail&pos='+ i +'&'+ q;
		r[i].link = '/content/info.niwota.frames/bin/image?' + q;
		r[i].title = '';
		r[i].description = '';
	}
	return r;
}

$(document).ready(function(){
	$.initOptionMenu();
	var peer = (data ? data.peer : '');
	loadFrames(peer);
});
</script>
</head>
<body >

<div id="topnav">
	<a class="logo" href="/content/info.niwota.frames/bin/frames">
	<img class="icon32" src="/icon/info.niwota.frames"  alt="E*Frame" >
	<span>E*Frame</span>
	</a>

	<span class="top-right" style="margin-right: 64px;">
	<span class="action"><a href="/content/info.niwota.frames/bin/peers" onclick="listPeer(); return false;">Peers</a></span>&nbsp;|&nbsp;
	<span class="action"><a href="/content/info.niwota.frames/bin/frames">My frames</a></span>&nbsp;|&nbsp;
	<span class="action"><a href="/content/info.niwota.frames/bin/help" target="_help" >Help</a></span>&nbsp;|&nbsp;
	<span class="action"><a href="/content/info.niwota.frames/bin/quit" onclick="self.close();">Quit</a></span>

	</span>
	<div>
	<img src="/image/divider_horizontal_light.png" style="vertical-align: bottom; clear: both; display: inline; width: 90%; height: 2px;" />
	</div>
</div>

<!--page content-->
<div id="page-content">


<div style="clear: both;"></div>

<div id="frame-panel">
<table>
<tr><td>
<div id="pagecontrols" class="pagecontrols"></div>
</td></tr>
<tr><td>
<div id="gallery-frame"><div id="gallery"></div></div>
</td></tr>
</table>
</div>


<div id="peer-panel" style="position:absolute; z-index:1001; left: 100px; top 100px; display:none;" class="wrapper">
<div class="section-title"></div>
<div id="peer-list" class="section"></div>
</div>

<div id="frame-list" style="position:absolute; z-index:1001; left: 100px; top 100px;"></div>

</div>
<!--//page content-->

<div id="optionmenu">
<a href="/content/info.niwota.frames/bin/peers" onclick="listPeer(); return false;" title="Peers" ><img src="/content/info.niwota.frames/res/drawable/ic_menu_peers" /></a>
<a href="/content/info.niwota.frames/bin/frames" title="My frames"><img src="/content/info.niwota.frames/res/drawable/ic_menu_archive" /></a>
<a href="/content/info.niwota.frames/bin/help" target="_help" title="Help" ><img src="/res/drawable/ic_menu_help" /></a>
<a href="/content/info.niwota.frames/bin/quit" title="Quit" onclick="self.close();"><img src="/res/drawable/ic_menu_done" /></a>
</div>

<div id="footer">
<div>
<img src="/image/divider_horizontal_light.png" style="vertical-align: bottom; clear: both; display: inline; width: 90%; height: 2px;" />
</div>
E*Frame &copy; 2.1.0 2010 All rights reserved
</div>

<div id="wallpaper" style="display: block;"><img src="/wallpaper/5" width="100%" height="100%" /></div>

</body>
</html>